<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>形状</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
<header>
    <h1>第三章 形状</h1>
</header>
<main>
    <section>
        <h2>9 自适应的椭圆</h2>
        <article>
            <h3>椭圆</h3>
            <div class="ellipse"></div>
            <h3>半椭圆</h3>
            <div class="half-ellipse"></div>
            <h3>四分之一椭圆</h3>
            <div class="quarter-ellipse"></div>
        </article>
    </section>
    <hr>
    <section>
        <h2>10 平行四边形</h2>
        <article>
            <h3>平行四边形</h3>
            <div class="parallelograms-pseudo">Click Me</div>
        </article>
    </section>
    <hr>
    <section>
        <h2>11 菱形图片</h2>
        <article>
            <h3>基于变形的方案</h3>
            <div class="diamond-images">
                <img src="./dog.jpeg" alt="">
            </div>
        </article>
        <section>
            <h3>裁切路径方案</h3>
            <img class="diamond-clip" src="./dog.jpeg" alt="">
        </section>
    </section>
    <hr>
    <section>
        <h2>12 切角效果</h2>
        <section>
            <h3>切角、基于渐变</h3>
            <div class="bevel-corners-gradients"></div>
        </section>
        <section>
            <h3>弧形切角</h3>
            <div class="scoop-corners"></div>
        </section>
        <section>
            <h3>裁切路径方案</h3>
            <div class="bevel-corners-clipped"></div>
        </section>
    </section>
    <section>
        <h2>13 梯形标签页</h2>
        <section>
            <h3>伪元素+rotateX方案</h3>
            <div class="trapezoid-tabs-rotate-x">
                这是内部的文字
            </div>
        </section>
    </section>
    <section>
        <h2>14 饼图</h2>
        <section>
            <h3>简单饼图</h3>
            <div class="pie-animated"></div>
        </section>
        <section>
            <h3>conic-gradient方案</h3>
            <div class="pie-conic-gradient"></div>
        </section>
    </section>
</main>

</body>
</html>
